<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>个人简介</title>
        <link rel="icon" href="pic/14.ico" type="image/x-icon">
        <style>
            body
            {
                margin: 0;

                margin-bottom: 80px;

                background-color: #fffff0;

                margin-top: 150px;
            }
            #banner
            {
                height: 100px;

                width: 100%;

                background-image: url(pic/bg.jpg);   

                background-position: 50% 50%;

                position: fixed; 

                top: 0;

                left: 0;

            }
            #aha
            {
                width: 1000px;

                margin: 0 auto;
            }
            .clear:after
            {
                display: block;

                content: "";

                clear: both;
            }
            li
            {
                padding: 0 10px;
                
                list-style: none;

                float: left;

                height: 20px;

                line-height: 60px;
            }
            #name
            {
                font-size: 30px;

                color: #33ccee;

                display: inline-block;

                /*position: relative;

                top: 20px;

                left: -100px;*/
            }
            a
            {
                text-decoration-line: none;

                font-size: 20px;

                color: #fffff0;

                border-radius: 5px;
            }
            a:hover
            {
                background-color: skyblue;

                color: lightgreen;
            }
            #container
            {
                width: 1000px;

                margin: 100px auto;

            }
            h3
            {
                font-size: 25px;

                color: purple;
            }
            p
            {
                text-indent: 2em;

                font-family: 宋体;

                line-height: 30px;
            }
            .show
            {
                width: 1000px;
            }
            #over
            {
                text-align: right;

                font-family: 黑体;

                display: block;
            }
            #classpic
            {
                background-image: url(pic/bg.jpg);

                width: 1000px;

                height: 600px;

                background-position: 50% 50%;

                position: relative;

                z-index: -1;
            }
            .classmates
            {
                border-radius: 50%;

                border: 2px solid white;

                position: absolute;
            }
            #classm1
            {
                width: 200px;

                height: 200px;

                top: 10px;

                left: 10px;
            }
            #classm2
            {
                width: 180px;

                height: 180px;

                top: 50px;

                left: 600px;
            }
            #classm3
            {
                width: 240px;

                height: 240px;

                top: 240px;

                left: 300px;
            }
            #sponsor
            {
                z-index: -1;

                position: relative;
            }
            .icon
            {
                width: 200px;

                height: 80px;

                background-image: url(pic/d.jpg);

                position: relative;
            }
            #SC
            {
                background-position: 0 0;

                background-size: 470% 360%;

                top: 0;

                left: 0;
            }
            #TCL
            {
                background-position: 0 -160px;

                background-size: 470% 390%;

                top: -30px;

                left: 300px;
            }
            #ZTE
            {
                background-position: 200px -80px;

                background-size: 470% 380%;

                left: 650px;

                top: -150px;
            }
            #GIG
            {
                background-position: -200px -160px;

                background-size: 490% 390%;

                left: 100px;
            }
            #GSR
            {
                background-position: -200px 80px;

                background-size: 490% 390%;

                left: 550px;

                top: -150px;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <div id="aha">
                <!--<span id="name">荣凯</span>-->
                <ul id="content" class="clear">
                    <li id="name">荣凯</li>
                    <li><a href="#self">个人简介</a></li>
                    <li><a href="#town">我的家乡</a></li>
                    <li><a href="#unity">我的大学</a></li>
                    <li><a href="#classm">我的同学</a></li>
                    <li><a href="#mySpo">友情赞助</a></li>
                </ul>
            </div>
        </div>

        <div id="container">
            <h3 id="self">个人简介</h3>
            <p>本名詹姆斯·豪利特/罗根·豪利特（James Howlett/ Logan Howlett），1832年出生于加拿大的阿尔伯塔省，
                自从小时候发现自己的生父杀死自己的养父后，罗根的变种人能力便开始显现出来，他拥有延缓衰老和极强的自愈能力，双手还可以伸出骨爪。
                后来被威廉·史崔克抓走并对其实施X武器计划、骨骼被注入艾德曼合金，手上的骨爪也变成了无坚不摧的金刚爪。这使得罗根正式成为金刚狼（Wolverine）,并加入了复仇者联盟和X战警。</p>
            <img src="pic/self.jpg" alt="" class="show">
            <hr>

            <h3 id="town">我的家乡</h3>
            <p>东营市是山东省地级市，成立于1983年10月，是黄河三角洲的中心城市，我国重要的石油基地。位于山东省东北部、黄河入海口的三角洲地带，东经118º5´，北纬38º15´。
              东营是古代大军事家孙武的故里。山东地方代表戏曲吕剧的发源地。中国第二大石油工业基地胜利油田崛起地。被评为中国“六大最美湿地之一”。</p>
            <img src="pic/town.jpg" alt="" class="show">
            <hr>

            <h3 id="unity">我的大学</h3>
            <p>郑州大学西亚斯国际学院由美国西亚斯集团公司投资，与郑州大学合作，美国堪萨斯州富特海斯州立大学
                （Fort Hays State University，英文缩写FHSU）协办的中外合作办学机构，依附国家首批“211工程”重点大学——郑州大学。
                是河南省首家被国务院学位委员会批准可以实施境外学士学位教育合作项目的全日制本科院校，属于郑州大学二级学院。
                2008年与郑州大学合作实施培养硕士研究生教育项目。2016年官方统计，在校生已达27000余人。
                被郑州市公安局授予“国际和谐家园”称号；河南省普通本科院校体育专项检查一类院校；荣获“河南发展（成长）最快的院校”；
                中国教育总评榜十佳中外合作院校；新华网十大知名中外合作院校等荣誉称号。</p>
            <img src="pic/daxue.jpg" alt="" class="show">
            <hr>

            <h3 id="classm">我的同学</h3>
            <p></p>
            <div id="classpic">
                <img src="pic/self.jpg" alt="" class="classmates" id="classm1">
                <img src="pic/anim.jpg" alt="" class="classmates" id="classm2">
                <img src="pic/anim2.jpg" alt="" class="classmates" id="classm3">
            </div>
            <hr>

            <h3 id="mySpo">友情赞助</h3>
            <div id="sponsor">
                <div class="icon" id="SC"></div>
                <div class="icon" id="TCL"></div>
                <div class="icon" id="ZTE"></div>
                <div class="icon" id="GIG"></div>
                <div class="icon" id="GSR"></div>
            </div>
            <hr>
            <br><br>
            <span id="over">
                我是有底线的~~~~~~~~~~~
            </span>
        </div>

    </body>
</html>